<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style type="text/css">
        #box{width: 200px;height: 200px;background: red;position:absolute;left: 0;top: 0;}
        .son{width: 100px;height: 100px;background: green;position:absolute;right: 0;bottom:0;}
    </style>
</head>
<body>
    <div id="box">
        <div class="son"></div>
    </div>
    <script type="text/javascript">
        var box = document.getElementById("box");
        // 1.原理1：
        // (1)鼠标按下onmousedown，绑定document移动事件onmousemove
        // (2)鼠标弹起onmouseup，移除document移动事件
        // 2.拖拽原理
        // (1)onmousedown时，获取光标当前位置evt.pageX-大盒子的定位offsetLeft==>光标到大盒子的距离ox 
        // (2)onmousemove移动过程中，根据光标位置e.pageX、e.pageY减去ox、oy，决定box的样式left、top
        // * 图片移动的话会有默认行为，禁止移动。取消默认行为
        box.onmousedown = function(evt){
            var ox = evt.pageX - box.offsetLeft;
            var oy = evt.pageY - box.offsetTop;
            document.onmousemove = function(e){
                box.style.left = e.pageX - ox + 'px';
                box.style.top = e.pageY - oy + 'px';
                e.preventDefault();
            }
        }
        box.onmouseup = function(){
            document.onmousemove = null;
        }
        







    </script>
</body>
</html>